<template>
  <div class="fx-row" :style="{'justify-content':justify}">
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType, provide, Ref } from 'vue'

interface RowProps {
  gutter: number;
  justify: string;
}

export default defineComponent({
  name: 'fxRow',
  props: {
    gutter: {
      type: Number as PropType<number>,
      default: null,
      validator (val: number): boolean {
        return val > 0
      }
    },
    justify: {
      type: String as PropType<string>,
      default: null
    }
  },
  setup (props: RowProps) {
    provide<Ref<number>>('rowGutter', computed(() => props.gutter))
  }
})
</script>
